<!-- 在途信息列表 --> 
<template>
  <div>
    <div class="l-sech-wrap displayflex">
      <div class="flex1">
        <div class="m-sech-box displayflex">
          <i class="iconfont ft16 icon-search"></i>
          <div class="flex1 m-sech-ipt">
            <input type="text" placeholder="输入业务单号" v-model="billno">
          </div>
        </div>
      </div>
      <div class="l-sech-btn" @click="getData(1)">搜索</div>
      <!-- 如果有删选条件图标变黄色，添加class，orange -->
      <div class="l-sech-btn" @click="value=true">
        <i class="llse llse-shaixuan" :class="{orange:value1.length>0||startTime||endTime}"></i>
      </div>
    </div>
    <div class="noDate_page" v-if="datas.length == 0">
      <div class="noDate_icon"><i class="iconfont icon-null"></i></div>
      暂无数据
    </div>
    <template v-if="totalRecords > 0">
    <scroller lock-x scrollbar-y use-pullup :height="'-110'" :scroll-bottom-offst="100" v-if="totalRecords > 0" :pullup-config="ScrollerConfig" ref="Scroller">
      <div>
        <div class="driver-list driver-detail" v-for="item in datas">
          <div class="list-header">
            <span class="f-l">业务单号：<i>{{item.BBillNo}}</i></span>
          </div>
          <div class="list-content">
              <dl class="displayflex">
                  <dt>
                    <div>
                        <i class="llse llse-cargo"></i>
                        <p>{{item.OrdersPKGS}}件</p>
                      </div>
                  </dt>
                  <dd class="flex1">
                    <p>
                        <label>制单时间：</label>
                        <span>{{item.BillDate.split('T')[0]}}</span>
                    </p>
                    <p>
                        <label>起始地：</label>
                        <span>{{item.DepartureVenue}}</span>
                    </p>
                    <p>
                        <label>目的地：</label>
                        <span>{{item.ArrivalVenue}}</span>
                    </p>
                  </dd>
              </dl>
          </div>
          <div class="list-btn">                        
            <div class="carbtn" @click="goLoad(item.Guid)">录入</div>
          </div>
        </div>
      </div>
      <!-- <p class="txt-bottom" v-if="noMore"><em class="txt">我是有底线的</em></p> -->
    </scroller>
  </template>
  <!-- 筛选start -->
  <popup v-model="value" position="right">
      <div style="width:330px;">
        <div class="bill-form">
      <div class="tit">制单时间</div>
      <div class="displayflex bill-date">
        <div class="flex1 m-form-box">
          <datetime  title="" placeholder="开始时间"  v-model="startTime" ></datetime>
        </div>
        <div class="line">—</div>
        <div class="flex1 m-form-box">
          <datetime  title="" placeholder="结束时间"  v-model="endTime"></datetime>
        </div>
      </div>
      <div class="tit">目的地</div>
      <div class="m-form-box">
          <x-address placeholder="请选择省市区" v-model="value1" :list="addressData" title=""></x-address>
        </div>
    </div>
    <div class="displayflex bill-btn">
      <div class="flex1" @click="reset()">重置</div>
      <div class="flex1" @click="choice()">确定</div>
    </div>
      </div>
  </popup>
  <footer-menu ></footer-menu>
</div>
</template>

<style lang="less" scoped>
.m-form-box{
  .weui-cell__ft{
    text-align:left;
  }
  .vux-popup-picker-select{
    text-align:left !important;
  }
  .vux-cell-box{
    width:100%;
  }
}
.orange {
    color: #ff7202;
}
</style>
<script>
import footerMenu from '@/components/carrier/core/carrier-footer.vue';
import { Popup ,Datetime} from 'vux';
export default {
  components: {
    footerMenu,
    Popup,
    Datetime
  },
  data() {
    return {
      showdiv:false,
      value:false,
      value1:[],
      addressData: this.ChinaAddressV3Data,
      date:'',

      startTime: '',
      endTime: '',
      maskshow: false,

      billno: "",
      datas: [],
      PageIndex: 1,
      PageSize: 8,
      totalRecords: 0,

      ScrollerConfig: {
        content: "上拉加载",
        downContent: "上拉加载",
        height: 0,
        loadingContent: "加载中...",
        upContent: "上拉加载"
      },
      noMore: false,
    };
  },
  computed: {
    userinfo(){
      return localStorage.getItem('userinfo')?JSON.parse(localStorage.getItem('userinfo')):null;
    }
  },
  created(){
    this.getData();
  },
  watch: {
    items(val){
      this.count = 0;
    }
  },
  methods: {
    goLoad(id){
      this.$router.push({
        path: 'carrloadmsg',
        query:{
          Guid: id,
        }
      });
    } ,

    getData(type) {
      if (type == 1) {
        this.PageIndex = 1;
        this.datas = [];
      }
      let query = {
        TenantGuid: this.userinfo.TenantGuid,
        CorpGuid: this.userinfo.CorpGuid,
        DeliverGuid: this.userinfo.BelongGuid,
        StateList: ['52', '53', '56'],
        TPLPoType: 1,
        BBillNo: this.billno,
        ArrivalProvince: this.value1[0],
        ArrivalCity: this.value1[1],
        ArrivalDistrict: this.value1[2],
        StartDate: this.startTime,
        EndDate: this.endTime,
        QueryType: 'Main',
      };
      this.Ajax.post("GetEnrouteList", query).then((res) => {
        if (res.IsSuccess) {
          if(res.Datas.length > 0) {
            this.datas = this.datas.concat(res.Datas);
          }
          this.PageIndex++;
          this.totalRecords = res.TotalRecords;
          this.$nextTick(() => {
            if(this.$refs.Scroller) {
              this.ScrollControl();
            }
          })
        } else {
          this.Toast({
            message: "发生错误，请刷新重试"
          });
        }
      });
    },

    ScrollControl() {
      if (this.totalRecords <= this.PageSize) {
        this.ScrollerConfig.content = "";
        this.noMore = true;
        this.$nextTick(() => {
          this.$nextTick(() => {
            this.$refs.Scroller.disablePullup();
          });
        });
      }

      if (this.datas.length > 0 && this.$refs.Scroller) {
        this.$nextTick(() => {
          this.$nextTick(() => {
            this.$refs.Scroller.donePullup();
          });
        });
      }

      if (this.totalRecords == this.datas.length) {
        this.$nextTick(() => {
          this.$nextTick(() => {
            this.$refs.Scroller.disablePullup();
            this.noMore = true;
          });
        });
      }
    },

    reset() {
      this.value1 = [];
      this.startTime = "";
      this.endTime = "";
      this.getData(1);
    },
    choice() {
      this.value = false;
      this.getData(1);
    },
  },
};
</script>
